<template>
  <div class="home">
    <el-form :inline="true" :model="content" class="demo-form-inline">
      <el-form-item >
        <el-select v-model="content.voiture_model_name" clearable placeholder="请选择车辆类型">
            <el-option v-for="item in tableData1" :key="item.vehicleId" :label="item.vehicleName" :value="item.vehicleName">{{item.vehicleName}}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-input v-model="content.voiture_bus_numbe" placeholder="车牌号码"></el-input>
      </el-form-item>
      <el-form-item >
        <el-select v-model="content.voiture_motorcade_name" clearable placeholder="请选择车队名称">
            <el-option v-for="item in tableData2" :key="item.motorcadeId" :label="item.motorcadeName" :value="item.motorcadeName">{{item.motorcadeName}}</el-option>
          </el-select>
       </el-form-item>
      <el-form-item>
        <el-button round type="primary" icon="el-icon-search" @click="onSubmit"
          >搜索</el-button>
          <el-button round type="primary" icon="el-icon-search" @click="onSubmit1"
          >重置</el-button>
      </el-form-item>
    </el-form>
    <el-container>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="mini"
        round
        @click="add()"
        >+新增车辆</el-button>
    </el-container>
    <el-table 
    :data="tableData">
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.voitureId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆编号" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.voitureNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆类型" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.voitureModelName }}</span>
        </template>
      </el-table-column>
       <el-table-column label="车牌号码" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.voitureBusNumbe }}</span>
        </template>
      </el-table-column>
       <el-table-column label="所属车队" width="120">
        <template slot-scope="scope">
          <span style="margin-left: -2px">{{ scope.row.voitureMotorcadeName }}</span>
        </template>
      </el-table-column>
       <el-table-column label="GPS设备ID" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.voitureGpsid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="准载重量(千克)" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 5px">{{ scope.row.voitureVehicleLoad }}</span>
        </template>
      </el-table-column>
      <el-table-column label="准载体积(方)" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 25px">{{ scope.row.voitureTrafficVolume}}</span>
        </template>
      </el-table-column>
      <el-table-column label="过期状态" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 5px">
            <span v-if="scope.row.voitureOverdueStatus == 0">未过期</span>
            <span v-if="scope.row.voitureOverdueStatus == 1">即将过期</span>
            <span v-if="scope.row.voitureOverdueStatus == 2">已过期</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="车次名称" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 5px">{{ scope.row.voitureCurrentTrain}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            style="margin-left: -12px"
            size="mini"
            icon="el-icon-edit"
            type="warning"
            round
            @click="handleEdit(scope.$index,scope.row)"
            >编辑</el-button>
          <el-button
            style="margin-left: -12px"
            size="mini"
            type="danger"
            round
            icon="el-icon-delete"
            @click="handleDelete(scope.$index,scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="content.page"
      :page-sizes="[2, 3, 4]"
      :page-size="content.num"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" >
        <el-form-item label="车辆编号" prop="voitureNumber" :label-width="formLabelWidth">
          <el-input v-model="form.voitureNumber" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车辆类型" prop="voitureModelName" :label-width="formLabelWidth">
          <el-select v-model="form.voitureModelName" clearable placeholder="请选择车辆类型">
            <el-option v-for="item in tableData1" :key="item.vehicleId" :label="item.vehicleName" :value="item.vehicleName">{{item.vehicleName}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码" prop="voitureBusNumbe" :label-width="formLabelWidth">
          <el-input v-model="form.voitureBusNumbe" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属车队" prop="voitureMotorcadeName" :label-width="formLabelWidth">
          <el-select v-model="form.voitureMotorcadeName" clearable placeholder="请选择所属车队">
            <el-option v-for="item in tableData2" :key="item.motorcadeId" :label="item.motorcadeName" :value="item.motorcadeName">{{item.motorcadeName}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="GPS设备ID" prop="voitureGpsid" :label-width="formLabelWidth">
          <el-input v-model="form.voitureGpsid" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="准载重量" prop="voitureVehicleLoad" :label-width="formLabelWidth">
          <el-input v-model="form.voitureVehicleLoad" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="准载体积" prop="voitureTrafficVolume" :label-width="formLabelWidth">
          <el-input v-model="form.voitureTrafficVolume" style="width: 220px" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round type="info" @click="dialogFormVisible = false">取 消</el-button>
        <el-button round type="primary" @click="updStu()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
  data(){
    return{
      tableData:[],
      tableData1:[],
      tableData2:[],
      total: 0,
      tclini:[],
      dialogFormVisible: false, //是否显示dialog，默认不显示
      formLabelWidth: "200px",
      bj:"",
      content: {
        page: 1,
        num: 2,
        voiture_model_name: "",//车辆类型
        voiture_bus_numbe:"",//车牌号码
        voiture_motorcade_name:"",//车队名称
      },
      form: {
        voitureId:"",//车辆序号
        voitureNumber:"",//车辆编号
        voitureBusNumbe: "",//车牌号码
        voitureModelName:"",//车型名称
        voitureMotorcadeName: "",//车队名称
        voitureGpsid: "",//GPSID
        voitureVehicleLoad:"",//车辆载重
        voitureTrafficVolume:"",//车辆体积
        voitureOverdueStatus: "0",//过期状态
        voitureCurrentTrain:"",//当前车次名称
        voitureStatus:"0",
      },
    }
  },
  methods:{
    load(){
      //获取车辆信息
      axios.post("/api/transshipment-tms-voiture/getPageListVoiture",this.content).then(data=>{
        this.tableData = data.data.rows; //获取分页数据
        this.total = data.data.total; //获取总记录数
      })
      //获取车型信息
      axios.get("/api/transshipment-tms-voiture/getListVehicleType").then(data=>{
        this.tableData1=data.data;
        //console.log(data.data)
      })
       //获取车队信息
      axios.get("/api/transshipment-tms-voiture/getListMotorcade").then(data=>{
        this.tableData2=data.data;
        //console.log(data.data)
      })
    },
    handleEdit(index,row){
      this.form=row;
      this.form.did=parseInt(row.dwid);
      this.dialogFormVisible=true;
      this.bj=false;
    },
    handleDelete(index,row){
       this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get("/api/transshipment-tms-voiture/delVoiture?id="+row.voitureId).then(data=>{
            if(data.data){
                this.load();
            }else{
              this.$message({
              type: 'success',
              message: '删除失败!'
              })
            }
      })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
     onSubmit(){
       this.load();
     },
    onSubmit1(){
      this.content.motorcade_number="",
      this.content.motorcade_name="",
      this.content.motorcade_head="",
      this.load();
    },
    add(){
      this.dialogFormVisible=true;
      this.bj=true;
      this.form={};
    },
    updStu(){
    //   let upd = new Date();
    //   var y = upd.getFullYear();
    //   var m = (upd.getMonth() + 1).toString().padStart(2, "0");
    //   var d = upd.getDate().toString().padStart(2, "0");
    //   var h = upd.getHours().toString().padStart(2,"0");
    //   var mi=upd.getMinutes().toString().padStart(2,"0");
    //   var s=upd.getSeconds().toString().padStart(2,"0");
    //   var tim = y + "-" + m + "-" + d +" "+h+":"+mi+":"+s;
      if(this.bj){
        //this.form.circuitTypesDate=tim;
        axios.post("/api/transshipment-tms-voiture/addVoiture",this.form).then(data=>{
          if(data.data){
             this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            });
          }
           this.load();
        })
        this.dialogFormVisible=false;
      }else{
        //this.form.circuitTypesDate=tim;
        axios.post("/api/transshipment-tms-voiture/updVoiture",this.form).then(data=>{
          if(data.data){
             this.$message({
             message: '恭喜你，修改成功',
             type: 'success'
            });
          }
           this.load();
        })
        this.dialogFormVisible=false;
      }
    },
    handleSizeChange(val){
       this.content.num = val;
       this.load();
    },
    handleCurrentChange(val){
       this.content.page = val;
       this.load();
    },
  },
  created(){
    this.load();
   },
})
</script>
